20. CSS Preprocessors - SASS & SCSS

I. What is SASS?

Explanation: SASS (Syntactically Awesome Stylesheets) ek CSS preprocessor hai jo CSS ko zyada powerful aur maintainable banata hai. Isme variables, nesting, functions, aur reusability jaise features hote hain. Final output hamesha normal CSS me convert hota hai using a compiler.

II. Variables & Mixins

Explanation: SASS me $ ka use karke variables banaye jaate hain. @mixin reusable code block hota hai jise @include karke use kar sakte ho.

$primary-color: #3498db;

@mixin rounded {
  border-radius: 12px;
  padding: 10px;
}

.button {
  background: $primary-color;
  color: white;
  @include rounded;
}

III. Nesting in SASS

Explanation: SASS me selectors ko nesting ke through clearly structure kiya ja sakta hai, jaise HTML hierarchy hoti hai.

nav {
  ul {
    list-style: none;
    li {
      display: inline-block;
      a {
        text-decoration: none;
        color: black;
      }
    }
  }
}

IV. SCSS vs SASS

Explanation: Dono hi same features dete hain, par syntax alag hoti hai:

• SCSS: CSS jaisa syntax (curly braces aur semicolons)
• SASS: Indentation-based syntax (no braces, no semicolons)

Example (SCSS):

$color: red;

.box {
  color: $color;
}

Example (SASS):

$color: red

.box
  color: $color

Note: In examples ko browser me directly run nahi kiya ja sakta, kyunki SASS/SCSS ko pehle compile karke CSS me convert karna padta hai. Use SassMeister ya official SASS site.